<template>
<transition name="bounce">
	<div class="toast" :class="{'hidden': !visiable}">
		<i class="message">{{message}}</i>
		<i class="icon icon-tuichu" @click="closeToast"></i>
	</div>
</transition>
</template>
<script>
	export default {
		data () {
			return {
				message: '提示消息',
				visiable: true
			}
		},
		methods:{
			closeToast: function () {
				this.close();
			}
		}
	}
</script>
<style scoped lang="less">
	@import url("../../assets/css/variable.less");
	@import url("../../assets/css/public.less");
	.toast{
		&{
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%);
			
			.transition(@property: opacity;@duration: .3s);
			display: table-cell;
			border-radius: 5px;
			padding: 20px;
			min-width: 120px;
			min-height: 60px;
			line-height: 60px;
			text-align:center;
			background: rgba(0, 0, 0, 0.5);
			color: @color;
		}
		&:hover .icon-tuichu{
			display: inline-block;
		}
		.icon-tuichu{
			position: absolute;
			display: none;
			right: 8px;
		    top: 8px;
		    height: 16px;
		    line-height: 16px;
		    margin: 0;
		}
	}

	.hidden {
	    transform: scale(0);
	    opacity: 0;
	}
</style>